<template>
	<div>
		<div class="main">
			能力测试1 SQL查询1
		</div>
		<div style="margin-left: 1.625rem;margin-right: 1.625rem;">
			<!-- 顶部按钮 -->
			<div class="btn_group">
				<div class="header1">
					<div>
						<el-select v-model="value" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						 <el-button  icon="el-icon-download" style="background-color:  #03d3bd;color: white;">导出成绩</el-button>
						 <el-button   icon="el-icon-pie-chart" style="background-color:  #03d3bd;color: white;">作业统计</el-button>
					</div>
					<!-- <el-input v-model="search" placeholder="请输入内容" suffix-icon="fa fa-search"></el-input> -->
				</div>
				<!-- 搜索框 -->
				<div class="dataSearch">
					<!-- 输入框 -->
					<input type="text" class="ipt_val" placeholder="搜索" v-model="formData.search" />
					<!-- 放大镜 -->
					<input type="button" class="ipt_fdj" @click="getFiles" />
					<!-- 搜索按钮 -->
					<button type="button" class="ipt_search" @click="getFiles">搜索</button>
				</div>
			</div>
			<div>

				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="按人批阅" name="first" style="margin-bottom: 1.875rem;">
						<el-radio v-model="radio" label="1">已交</el-radio>
						<el-radio v-model="radio" label="2" style="margin-bottom: 1.875rem;">未交</el-radio>
						<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
							<el-table-column type="selection">
							</el-table-column>

							<el-table-column prop="name" label="姓名">
							</el-table-column>
							<el-table-column prop="address" label="学号" show-overflow-tooltip>
							</el-table-column>
							<el-table-column label="提交时间">
								<template slot-scope="scope">{{ scope.row.date }}</template>
							</el-table-column>
							<el-table-column label="状态">
								<template slot-scope="scope">
									<el-tag type="success" v-if="scope.$index%2==0">已统计</el-tag>
									<!-- <el-button type="success" size="mini" ></el-button> -->
									<el-tag type="warning" v-if="scope.$index%2!=0">待批阅</el-tag>
									<!-- <el-button type="warning"　size="mini" >待批阅</el-button> -->
								</template>
							</el-table-column>
							<el-table-column prop="name" label="批阅时间">
							</el-table-column>
							<el-table-column prop="name" label="批阅人">
							</el-table-column>
							<el-table-column prop="address" label="成绩" show-overflow-tooltip>
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="220">
								<template slot-scope="scope">
									<el-button style="background-color:#03d3bd;color: white;" size="mini"  v-if="scope.$index%2==0" @click="Statistics()">详情</el-button>
									<el-button style="background-color:#03d3bd;color: white;" size="mini" @click="handleClick(scope.row)" v-if="scope.$index%2!=0">批阅</el-button>
                                    <el-button 　size="mini" style="background-color:#03d3bd;color: white;">打回</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
					<el-tab-pane label="按题批阅" name="second">
						<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
							<el-table-column label="题号">
								<template slot-scope="scope">{{ scope.row.date }}</template>
							</el-table-column>
							<el-table-column prop="name" label="题目">
							</el-table-column>
							<el-table-column prop="address" label="题型" show-overflow-tooltip>
								<template slot-scope="scope">
									   <el-button type="success" size="mini" @click="handleClick(scope.row)">简答题</el-button>
									
								</template>
							</el-table-column>
							<el-table-column prop="address" label="待批阅" show-overflow-tooltip>
							</el-table-column>
							<el-table-column fixed="right" label="操作">
								<template slot-scope="scope">
									<el-button type="success" size="mini" @click="handleClick(scope.row)">批阅</el-button>

								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>

				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value: '全部班级',
				activeName: 'first',
				radio: 'first',
				tableData: [{
					date: '2016-05-03',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-02',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-08',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-06',
					name: '王小虎',
					address: '2018401322'
				}, {
					date: '2016-05-07',
					name: '王小虎',
					address: '2018401322'
				}],
				multipleSelection: []
			}
		},
		methods: {
			// 获取文件列表
			async getFiles() {
				// 清空被选中文件id列表
				this.checkedList = []
				console.log('获取文件列表')
				// params参数：文件夹id、搜索的值、是否逆序
				// this.files = await axios.get('/files', { params: this.formData })
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			Home() {
				this.$router.push("/Home");
			},
			Statistics()
			{
				this.$router.push('/Statistics');
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main {
		width: 100%;
		height: 4.25rem;
		line-height: 4.25rem;
		font-size: 1.25rem;
		font-weight: 18.75;
		/* display: flex;
		justify-content: space-between; */
		color: white;
		text-align: center;
		cursor: pointer;
		background-color: #03d3bd;
	}

	.main>div {

		margin-left: 20px;
		margin-right: 1.25rem;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 20px;
		margin-left: 0.625rem;


		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #181e33;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #3a8bff;
				}

				&:focus {
					border-color: #3a8bff;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: #03d3bd;
				color: #fff;

				&:hover {
					cursor: pointer;
					color: #3a8bff;
				}
			}
		}
	}
</style>
